<template>
    <div class="section-1">
        <div class="container">
            <div class="imgs">
                <div class="animate">
                    <div class="animate-item animate-1">
                        <img src="./images/bear.png" class="bg">
                        <div class="leida">
                            <div class="round">
                                <div class="round-item round-outer"></div>
                                <div class="round-item round-inner"></div>
                                <div class="round-item round-small"></div>
                            </div>
                            <img src="./images/jiao.png" class="jiao">
                        </div>
                    </div>
                    <div class="animate-item animate-2">
                        <ability-canvas />
                        <img src="./images/bear.png" class="bg">
                    </div>
                    <div class="animate-item animate-3">
                        <img src="./images/ability-video.gif" alt="">
                    </div>
                    <div class="animate-item animate-4">
                        <img src="./images/bear.png" class="bg">
                        <div class="voice">
                            <img src="./images/voice.png" class="voiceImg">
                            <div class="round">
                                <div class="round-item round-outer"></div>
                                <div class="round-item round-inner"></div>
                                <div class="round-item round-small"></div>
                                <img src="./images/microphone.png" class="microphone animated tada" style="animation-iteration-count:infinite;animation-delay:1s;">
                            </div>
                        </div>
                    </div>
                    <div class="animate-item animate-5">
                        <img src="./images/ability-5.png">
                    </div>
                </div>
            </div>
            <div class="content" v-show="!isWap">
                <div id="swiper-part1-control-bar" class="swiper-control-box">
                    <ul class="control-module">
                        <li class="control-item ga-data">
                            <p class="item-toggle">视觉识别</p>
                            <p class="control-item-desc">
                                可通过标定标志识别对象物体<br/>
                                可获取对象物体的坐标数据<br/>
                                可通过近距离进行人脸识别<br/>
                                可通过网络实时传输影像数据<br/>
                            </p>
                            <p class="hide-desc">
                                可通过标定标志识别对象物体<br/>
                                可获取对象物体的坐标数据<br/>
                                可通过近距离进行人脸识别<br/>
                                可通过网络实时传输影像数据<br/>
                            </p>
                        </li>
                        <li class="control-item ga-data">
                            <p class="item-toggle">电源、能耗、物理、性能等特性</p>
                            <p class="control-item-desc">
                                内置电池可支持1小时以上活动续航<br/>
                                支持无线充电<br/>
                                断电关机后在恢复电量时支持手动重启<br/>
                                拥有体温<br/>
                                实现2000H可用时长的质量保障<br/>
                                内置低功耗的上位机<br/>
                                拥有本地存储<br/>
                                具备蓝牙+WIFI+4G三模式数据通讯能力<br/>
                                整机重量不超过8KG<br/>
                            </p>
                            <p class="hide-desc">
                                内置电池可支持1小时以上活动续航<br/>
                                支持无线充电<br/>
                                断电关机后在恢复电量时支持手动重启<br/>
                                拥有体温<br/>
                                实现2000H可用时长的质量保障<br/>
                                内置低功耗的上位机<br/>
                                拥有本地存储<br/>
                                具备蓝牙+WIFI+4G三模式数据通讯能力<br/>
                                整机重量不超过8KG<br/>
                            </p>
                        </li>
                        <li class="control-item ga-data">
                            <p class="item-toggle">运动、活动与姿态</p>
                            <p class="control-item-desc">
                                以熊科动物的动作特性作步态设计<br/>
                                可支持一对后臂的姿态调整实现端坐的能力<br/>
                                可支持一对前臂形成抱物的姿态<br/>
                                实现身体左右翻滚及侧卧状态下回正的能力<br/>
                                实现眼部的转动<br/>
                                实现嘴部的活动<br/>
                                实现耳部的轻微抖动<br/>
                                通过脸部填充物料的微动作实现2种简单表情<br/>
                                支持人工远程遥控<br/>
                            </p>
                            <p class="hide-desc">
                                以熊科动物的动作特性作步态设计<br/>
                                可支持一对后臂的姿态调整实现端坐的能力<br/>
                                可支持一对前臂形成抱物的姿态<br/>
                                实现身体左右翻滚及侧卧状态下回正的能力<br/>
                                实现眼部的转动<br/>
                                实现嘴部的活动<br/>
                                实现耳部的轻微抖动<br/>
                                通过脸部填充物料的微动作实现2种简单表情<br/>
                                支持人工远程遥控<br/>
                            </p>
                        </li>
                        <li class="control-item ga-data">
                            <p class="item-toggle">语音交互</p>
                            <p class="control-item-desc">
                                可听懂数项指定的语音指令<br/>
                                可播出已录制的熊幼崽叫声<br/>
                                可在某种前置条件下触发相应的叫声<br/>
                                可在随机状态下触发相应的叫声<br/>
                            </p>
                            <p class="hide-desc">
                                可听懂数项指定的语音指令<br/>
                                可播出已录制的熊幼崽叫声<br/>
                                可在某种前置条件下触发相应的叫声<br/>
                                可在随机状态下触发相应的叫声<br/>
                            </p>
                        </li>
                        <li class="control-item ga-data">
                            <p class="item-toggle">定位、避障与导航</p>
                            <p class="control-item-desc">
                                基于结构光视觉传感器<br/>
                                实现室内级别的建图能力<br/>
                                实现室内级别的定位导航与避障能力<br/>
                                实现精准到达某个指定位置的能力<br/>
                            </p>
                            <p class="hide-desc">
                                基于结构光视觉传感器<br/>
                                实现室内级别的建图能力<br/>
                                实现室内级别的定位导航与避障能力<br/>
                                实现精准到达某个指定位置的能力<br/>
                            </p>
                        </li>
                        <div class="control-bar"></div>
                    </ul>
                </div>
            </div>
            <div class="nav" v-show="isWap">
                <span class="current">视觉识别</span>
                <span>电源、能耗、物理、性能等特性</span>
                <span>运动、活动与姿态</span>
                <span>语音交互</span>
                <span>定位、避障与导航</span>
            </div>
            <div class="content-wap" v-show="isWap">
                <p class="control-item-desc">
                    * 可通过标定标志识别对象物体<br/>
                    * 可获取对象物体的坐标数据<br/>
                    * 可通过近距离进行人脸识别<br/>
                    * 可通过网络实时传输影像数据<br/>
                </p>
                <p class="control-item-desc">
                    * 内置电池可支持1小时以上活动续航<br/>
                    * 支持无线充电<br/>
                    * 断电关机后在恢复电量时支持手动重启<br/>
                    * 拥有体温<br/>
                    * 实现2000H可用时长的质量保障<br/>
                    * 内置低功耗的上位机<br/>
                    * 拥有本地存储<br/>
                    * 具备蓝牙+WIFI+4G三模式数据通讯能力<br/>
                    * 整机重量不超过8KG<br/>
                </p>
                <p class="control-item-desc">
                    * 以熊科动物的动作特性作步态设计<br/>
                    * 可支持一对后臂的姿态调整实现端坐的能力<br/>
                    * 可支持一对前臂形成抱物的姿态<br/>
                    * 实现身体左右翻滚及侧卧状态下回正的能力<br/>
                    * 实现眼部的转动<br/>
                    * 实现嘴部的活动<br/>
                    * 实现耳部的轻微抖动<br/>
                    * 通过脸部填充物料的微动作实现2种简单表情<br/>
                    * 支持人工远程遥控<br/>
                </p>
                <p class="control-item-desc">
                    * 可听懂数项指定的语音指令<br/>
                    * 可播出已录制的熊幼崽叫声<br/>
                    * 可在某种前置条件下触发相应的叫声<br/>
                    * 可在随机状态下触发相应的叫声<br/>
                </p>
                <p class="control-item-desc">
                    * 基于结构光视觉传感器<br/>
                    * 实现室内级别的建图能力<br/>
                    * 实现室内级别的定位导航与避障能力<br/>
                    * 实现精准到达某个指定位置的能力<br/>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import abilityCanvas from './ability-canvas'
export default {
    name: 'section-1',
	components:{ abilityCanvas },
	data () {
		return {
			isWap: false
		}
	},
    mounted(){
        if($(window).width() < 767){
            this.isWap = true
            this.initWap()
        }else{
            this.isWap = false
            this.initPC()
        }
    },
    methods:{
        initPC(){
            var controlBar = $("#swiper-part1-control-bar");
			var itemDesc = $("#swiper-part1-control-bar .control-item-desc");
			var controlItem = $("#swiper-part1-control-bar .control-item");
			var animations = $(".ability .animate-item");
			var idx = 0;
            var flag = true;
            
            controlBar.find("li").on("click", function() {
			    var index = $(this).index();
			    var curAnimation = $(animations[index])
			    var barHeight = $(this).outerHeight()
			    var descHeight = $(this).find(".hide-desc").outerHeight();

			    idx = index

			    if (!$(this).hasClass("current")) {

			        controlBar.find("li").removeClass("current")
			        $(this).addClass("current")

			        itemDesc.css({
			            height: "0px",
			            opacity: 0
                    })
                    
			        $(this).find(".control-item-desc").css({
			            height: 5 === index ? descHeight - 16 + "px" : descHeight + "px",
			            opacity: 1
			        })

			        controlBar.find(".control-bar").stop().animate({
			            height: barHeight + descHeight + "px",
			            top: 5 === index ? (barHeight + 8) * index + "px" : barHeight * index + "px"
			        }, 100)

                    animations.fadeOut()
                    setTimeout(()=>{
                        curAnimation.fadeIn()
                    },500)
			    }
			})

			if (flag) {
                flag !== false  && $(controlItem[idx]).trigger("click")
                setInterval(function() {
                    flag !== false  && $(controlItem[idx]).trigger("click")
                    idx = idx + 1
                    if(idx === 5){
                        idx = 0
                    }
                }, 5000)
			}
        },
        initWap(){
            var controlItem = $('.section-1 .nav span');
            var animations = $(".ability .animate-item");
            var text  = $(".content-wap p");
            var idx = 0;
            var flag = true;

            $(animations[0]).show()
            $(text[0]).show(0)

            $('.section-1 .nav').find('span').on("click", function() {

                var index = $(this).index();
                var curAnimation = $(animations[index])
                var curText = $(text[index])

                idx = index

			    if (!$(this).hasClass("current")) {
			        $('.section-1 .nav span').removeClass("current")
			        $(this).addClass("current")
                    animations.fadeOut()
                    curAnimation.fadeIn()
                    text.hide()
                    curText.show()
                }

                let _container = $('.section-1 .nav')               // 获取滚动容器元素
                let _column = $('.section-1 .nav span').eq(index)  // 获取当前active栏目元素

                let move    // 最终滚动值
                let _container_width = _container.width()               // 容器宽度
                let _container_left = _container.scrollLeft()           // 容器当前滚动条的值
                let _column_width = _column.width()                     // 栏目宽度
                
                let _column_left = _column.position().left              // 栏目距离屏幕左边的距离
                let midWidth = (_container_width - _column_width) / 2   // 屏幕中心线的宽度
                // 容器滚动为0，并且active栏目位于中间线左边？滚动值为0 ：当前容器滚动值 + （active栏目相对于中间线的值，有正负）
                if (_container_left === 0 && _column_left <= midWidth) {
                    move = 0
                } else {
                    move = _container_left + (_column_left - midWidth)
                }
                _container.animate({ 'scrollLeft': move }, 300)
            })
            
            if (flag) {
                flag !== false  && $(controlItem[idx]).trigger("click")
                setInterval(function() {
                    flag !== false  && $(controlItem[idx]).trigger("click")
                    idx = idx + 1
                    if(idx === 5){
                        idx = 0
                    }
                }, 6000)
			}
        }
    }
}
</script>

<style lang="less" scoped>
.section-1{
    height: 700px;
    background: #000;
    overflow: hidden;
    .container{
        position: relative;
    }
    .imgs{
        position: absolute;
        width: 780px;
        height: 500px;
        max-width:100%;
        max-height:100%;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        .animate{
			position: absolute;
			top: 0;
			width: 100%;
            height: 100%;
            .animate-item{
                position: absolute;
                top: 0;
                right:0;
                width: 100%;
                height: 100%;
                color:red;
                font-size:40px;
                display: none;
                &:nth-child(1){
                    right:140px;
                    width:250px;
                    height:380px;
                    top:50%;
                    margin-top:-190px;
                    .bg{
                        width:100%;
                        position: absolute;
                        top:50%;
                        right:0px;
                        transform: translateY(-50%);
                    }
                    .leida{
                        width: 137px;
                        height:137px;
                        position: absolute;
                        top: 2px;
                        right: -10px;
                        .round{
                            width:100%;
                            height:100%;
                            left:50%;
                            transform: translateX(-50%);
                            .round-item{
                                background: url(./images/huan.png) no-repeat 0 0;
                                background-size: 100% 100%;
                            }
                        }
                        .jiao{
                            width:100%;
                            height:100%;
                            animation:loadRotate 3s linear infinite;
                        }
                        &:before{
                            content:'';
                            width:195px;
                            height:1px;
                            display: inline-block;
                            background:url(./images/line-1.png) no-repeat 0 0;
                            background-size: 100% 100%;
                            position: absolute;
                            top:50%;
                            left:50%;
                            transform: translate(-50%,-50%);
                        }
                        &:after{
                            content:'';
                            width:1px;
                            height:195px;
                            display: inline-block;
                            background:url(./images/line.png) no-repeat 0 0;
                            background-size: 100% 100%;
                            position: absolute;
                            top:50%;
                            left:50%;
                            transform: translate(-50%,-50%);
                        }
                    }
                }
                &:nth-child(2){
                    width:500px;
                    max-width:100%;
                    .bg{
                        width: 200px;
                        position: absolute;
                        top: 28%;
                        left: 50%;
                        transform: translateX(-55%);
                    }
                }
                &:nth-child(3){
                    img{
                        width:250px;
                        position: absolute;
                        top:50%;
                        right:125px;
                        transform: translateY(-50%);
                    }
                }
                &:nth-child(4){
                    right:-20px;
                    .bg{
                        width:227px;
                        height:346px;
                        position: absolute;
                        right:23%;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    .voice{
                        position: absolute;
                        right:-30px;
                        top: 50%;
                        transform: translateY(-50%);
                        .voiceImg{
                            max-width: 100%;
                        }
                        .round{
                            bottom:-30px;
                            left:50%;
                            margin-left:-30px;
                            .round-item{
                                animation-duration: 2s;
                            }
                            .microphone{
                                width: 15px;
                                height: 22px;
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                margin-top: -11px;
                                margin-left: -7.5px;
                            }
                        }
                    }
                }
                &:nth-child(5){
                    img{
                        max-width:100%;
                        width:600px;
                        position: absolute;
                        right:0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }
		}
    }
    .content{
        margin: 0 auto;
        width: 1200px;
        height: 700px;
        position: relative;
        z-index: 9;
        display: flex;
        align-items: center;
        .swiper-control-box{
			align-items: center;
			width: 384px;
			display: inline-block;
            z-index: 0;
            .control-module{
                padding-left: 16px;
                position: relative;
                display: inline-block;
                border-left: 1px solid #565656;
                .control-item{
                    position: relative;
                    overflow: hidden;
                    .item-toggle{
                        font-size: 18px;
                        color: #fff;
                        cursor: pointer;
                        line-height: 32px;
                    }
                    .control-item-desc{
                        font-size: 14px;
                        line-height: 24px;
                        color: rgba(255,255,255,.65);
                        height: 0;
                        transition: all .5s;
                    }
                    .hide-desc{
                        display: none;
                        line-height: 24px;
                        font-size: 14px;
                        padding-bottom: 10px;
                    }
                }
                .control-bar{
                    position: absolute;
                    width: 2px;
                    background: #FFE500;
                    top: 0;
                    left: -1px;
                    transition: all .3s ease;
                }
            }
		}
    }
    .nav{
        width:100%;
        padding-left: 30px;
        white-space: nowrap;
        overflow-x: auto;
        span{
            cursor: pointer;
            display: inline-block;
            height: 40px;
            padding-bottom:8px;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
            opacity: .5;
            white-space: nowrap;
            margin-right: 30px;
            &.current{
                opacity: 1;
                border-bottom:1px solid #fff;
                transition: all .6s;
            }
        }
    }
    .content-wap{
        // height:250px;
        color: rgba(255,255,255,.65);
        padding: 30px 15px;
        p{
            line-height: 25px;
            display: none;
        }
    }
}

@keyframes loadRotate{
  from{
    transform:rotateZ(0deg);
  }
  to{
    transform:rotateZ(360deg);
  }
}
</style>
